<template>
  <div class="containers">
    <el-card >

    <div class="">
      <div class="handle-box">
        <div class="margin-bottom">
          <el-select v-model="states" @change="getDataPage" placeholder="请选择类型" size="mini" class="mr10" style="width: 160px;">
            <el-option :key="-1" label="全部" :value="-1"></el-option>
            <el-option :key="0" label="待审核" :value="0"></el-option>
            <el-option :key="1" label="成功" :value="1"></el-option>
            <el-option :key="2" label="失败" :value="2"></el-option>
          </el-select>
          <el-select v-model="state" @change="getDataPage" placeholder="请选择类型" size="mini" class="mr10" style="width: 160px;">
            <el-option :key="-1" label="请选择店铺类型" :value="-1"></el-option>
            <el-option v-for="(item, index) in navlist" :key="item.ID" :label="item.name" :value="item.ID"></el-option>
          </el-select>
          <el-select v-model="code" @change="getDataPage" placeholder="请选择类型" size="mini" class="mr10" style="width: 160px;">
            <el-option :key="-1" label="请选择商家类型" :value="-1"></el-option>
            <el-option :key="0" label="线上商家" :value="0">
            </el-option> <el-option :key="1" label="线下商家" :value="1"></el-option>
          </el-select>
          <el-select v-model="types" @change="getDataPage" placeholder="请选择类型" size="mini" class="mr10" style="width: 160px;">
            <el-option :key="-1" label="请选择申请类型" :value="-1"></el-option>
            <el-option :key="0" label="个人" :value="0"></el-option>
            <el-option :key="1" label="企业" :value="1"></el-option>
          </el-select>
          <el-select v-model="province" @change="provincechange" placeholder="请选择省" size="mini" class="mr10" style="width: 160px;">
          <el-option v-for="(item, index) in provincelist" :key="item.name" :label="item.name"
            :value="item.name"></el-option>
        </el-select>
        <el-select v-model="city" @change="citychange" placeholder="请选择市" size="mini" class="mr10" style="width: 160px;">
          <el-option v-for="(item, index) in citylist" :key="item.name" :label="item.name"
            :value="item.name"></el-option>
        </el-select>
        <el-select v-model="area" @change="getDataPage" placeholder="请选择区" size="mini" class="mr10" style="width: 160px;">
          <el-option v-for="(item, index) in arealist" :key="item.name" :label="item.name"
            :value="item.name"></el-option>
        </el-select>
        <el-input v-model="keyword" placeholder="关键词" class="handle-input mr10" size="mini" style="width: 160px;"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getDataPage" class="mr10" size="mini">搜索</el-button>
        </div>

      </div>

      <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header" border :height="$tableHight"
        @selection-change="handleSelectionChange" v-loading="loading" size="mini">
        <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
        <el-table-column prop="user.nickname" label="申请用户" show-overflow-tooltip></el-table-column>
        <el-table-column prop="user.mobile" label="用户电话" width="110"></el-table-column>

        <el-table-column label="商家类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.code == 0 ? '线上商家' : '线下商家' }}
          </template>
        </el-table-column>
        <el-table-column label="申请类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.types == 0 ? '个人' : '企业' }}
          </template>
        </el-table-column>
        <el-table-column label="是否推荐" align="center">
          <template slot-scope="scope">
            {{ scope.row.is_excellent == 0 ? '否' : '是' }}
          </template>
        </el-table-column>
        <el-table-column prop="shop_class.name" label="店铺类型"></el-table-column>
        <el-table-column prop="name" label="店铺名称" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column label="店铺余额" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.money }}
          </template>
        </el-table-column>
        <el-table-column label="店铺积分" align="center">
          <template slot-scope="scope">
            {{ scope.row.coupon }}
          </template>
        </el-table-column>

        <el-table-column label="店铺地址"  show-overflow-tooltip width="200">
          <template slot-scope="scope">
            {{ scope.row.province + scope.row.city + scope.row.area + scope.row.address }}
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sort" @blur="updateBusiness(scope.row)" size="mini"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="结算比例">
          <template slot-scope="scope">
            <el-input v-model="scope.row.discount" @blur="updateBusiness(scope.row)" size="mini"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="enterprise" label="企业名称" width="150" show-overflow-tooltip>
          <!-- <template slot-scope="scope">
            <el-input v-if="scope.row.types != 0" v-model="scope.row.enterprise"
              @blur="updateBusiness(scope.row)" size="mini"></el-input>
          </template> -->
        </el-table-column>
        <el-table-column prop="mobile" label="联系电话" width="110"></el-table-column>
        <el-table-column label="操作" width="320" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.is_excellent == 0 && scope.row.state == 1"
              @click="updateBusiness(scope.row)" size="mini">设为推荐商家</el-button>
            <el-button type="text" v-if="scope.row.is_excellent == 1 && scope.row.state == 1"
              @click="updateBusiness(scope.row)" size="mini">取消推荐商家</el-button>
            <el-button type="text" @click="handleEdit(scope.row)" size="mini">详情</el-button>
            <el-button type="text" @click="handleData(scope.row)" size="mini">数据查看</el-button>
            <el-button type="text" @click="handleEdits(scope.row)" size="mini">交易记录</el-button>
            <el-button type="text" v-if="scope.row.state == 1"
              @click="copy((scope.row.code == 0 ? '/pages/business/businessdetail?id=' : '/pages/business/businessdetailDown?id=') + scope.row.ID)" size="mini">复制链接</el-button>

          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
          :current-page="query.pageIndex" :page-sizes="[20, 30, 40, 50]" :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
        </el-pagination>
      </div>
    </div>
    <el-dialog :title="'店铺状态:' + ['待审核', '已通过', '已拒绝', '已冻结'][info.state]" :visible.sync="dialogVisible" :before-close="handleClose" >
      <div class="">

        <el-descriptions title="申请用户信息" border size="mini">
          <template slot="extra"  v-if="info.state == 0">
            <el-button type="primary" size="mini" @click="submit(info)">通过</el-button>
            <el-button type="danger" size="mini" @click="submi">拒绝</el-button>
          </template>
          <template slot="extra" v-if="info.state == 1 || info.state == 3">
            <el-button type="warning"  @click="submits" class="" size="mini">{{ info.state == 1 ? '冻结' : '解冻'}}</el-button>
            <el-button type="primary" v-if="!inputShow" @click="editDetails" class="mr10" size="mini">编辑</el-button>
            <el-button type="primary" v-if="inputShow" @click="preserveInput" class="" size="mini">保存</el-button>

          </template>
          <el-descriptions-item label="申请用户昵称" :label-style="{width: '120px'}" :content-style="{width: '200px'}">{{ info.user.nickname }}</el-descriptions-item>
          <el-descriptions-item label="申请用户电话" :label-style="{width: '120px'}" :content-style="{width: '200px'}">{{ info.user.mobile }}</el-descriptions-item>
          <el-descriptions-item label="姓名" :label-style="{width: '120px'}" :content-style="{width: '200px'}">{{ info.username }}</el-descriptions-item>
          <el-descriptions-item label="身份证" :label-style="{width: '120px'}" :content-style="{width: '200px'}">{{ info.card }}</el-descriptions-item>
          <el-descriptions-item label="身份证正面" :label-style="{width: '120px'}" :content-style="{width: '200px'}">
            <i class="el-icon-picture" style="font-size: 20px; cursor: pointer;" @click="previewImage(info.positive)"></i>
          </el-descriptions-item>
          <el-descriptions-item label="身份证反面" :label-style="{width: '120px'}" :content-style="{width: '200px'}">
            <i class="el-icon-picture" style="font-size: 20px; cursor: pointer;" @click="previewImage(info.side)"></i>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="店铺信息" border size="mini" style="margin-top: 10px;">
          <el-descriptions-item label="店铺名称" :label-style="{width: '120px'}" :content-style="{width: '200px'}">{{ info.name ? info.name : '' }}</el-descriptions-item>
          <el-descriptions-item label="联系电话" :label-style="{width: '120px'}" :content-style="{width: '200px'}">{{ info.mobile }}</el-descriptions-item>
          <el-descriptions-item label="店铺地址" :label-style="{width: '120px'}" :content-style="{width: '200px'}">{{ info.province + info.city + info.area + info.address
            }}</el-descriptions-item>
          <el-descriptions-item label="申请类型" :label-style="{width: '120px'}" :content-style="{width: '200px'}">{{ info.types == 0 ? '个人' : '企业' }}</el-descriptions-item>
          <el-descriptions-item label="商家类型" :label-style="{width: '120px'}" :content-style="{width: '200px'}">{{ info.code == 0 ? '线上商家' : '线下商家' }}</el-descriptions-item>
          <el-descriptions-item label="店铺类型" :label-style="{width: '120px'}" :content-style="{width: '200px'}">{{ info.shop_class ? info.shop_class.name : '' }}</el-descriptions-item>
          <el-descriptions-item label="店铺介绍" :label-style="{width: '120px'}" :content-style="{width: '200px'}">{{ info.introduce }}</el-descriptions-item>
          <el-descriptions-item label="经营范围" :label-style="{width: '120px'}" :content-style="{width: '200px'}">{{ info.trade }}</el-descriptions-item>
          <el-descriptions-item label="企业名称" v-if="info.types == 1">{{ info.enterprise }}</el-descriptions-item>


          <el-descriptions-item label="商户ID" :label-style="{width: '120px'}" :content-style="{width: '200px'}">
            <el-input v-if="inputShow" v-model="info.three_merchant" size="mini"></el-input>
            <div v-else>{{ info.three_merchant }}</div>
          </el-descriptions-item>
          <el-descriptions-item label="商户手机号" :label-style="{width: '120px'}" :content-style="{width: '200px'}">
            <el-input v-if="inputShow" v-model="info.three_mobile" size="mini"></el-input>
            <div v-else> {{ info.three_mobile }}</div>
          </el-descriptions-item>
          <el-descriptions-item label="商家让利(%)" :label-style="{width: '120px'}" :content-style="{width: '200px'}">
            <el-input v-if="inputShow" v-model="info.discount" size="mini"></el-input>
            <div v-else>{{ info.discount }}</div>
          </el-descriptions-item>
          <el-descriptions-item label="补贴红包比例(%)" :label-style="{width: '120px'}" :content-style="{width: '200px'}">
            <el-input v-if="inputShow" v-model="info.subsidy_red" size="mini"></el-input>
            <div v-else>{{ info.subsidy_red }}</div>
          </el-descriptions-item>

          <el-descriptions-item label="营业执照号码" v-if="info.types == 1">{{ info.trade_code }}</el-descriptions-item>

          <el-descriptions-item label="店铺LOGO">
            <i class="el-icon-picture" style="font-size: 20px; cursor: pointer;" @click="previewImage(info.shop_head)"></i>
          </el-descriptions-item>
          <el-descriptions-item label="营业执照">
            <i class="el-icon-picture" style="font-size: 20px; cursor: pointer;" @click="previewImage(info.license)"></i>
          </el-descriptions-item>
          <el-descriptions-item label="支付二维码" v-if="info.code == 1 && info.state == 1">
            <vue-qr :text="qrtext(info)" :size="150" v-if="info.ID"></vue-qr>
            <span v-else>暂无二维码</span>
          </el-descriptions-item>
          <el-descriptions-item label="补充材料">
            <i v-if="info.other" class="el-icon-picture" style="font-size: 20px; cursor: pointer;" @click="previewImage(info.other)"></i>
          </el-descriptions-item>

        </el-descriptions>


      </div>
    </el-dialog>

    <el-dialog title="确认通过审核" :visible.sync="dialogFormVisible" width="30%">
      <el-input v-model="merchantId" size="mini" style="margin-top: 20px;" placeholder="请输入商户ID"></el-input>
      <el-input v-model="mobilePass" size="mini" style="margin-top: 20px;" placeholder="请输入手机号"></el-input>
      <el-input v-model="discountPass" size="mini" style="margin-top: 20px;" placeholder="请输入让利(%)"></el-input>
      <el-input v-model="subsidy_red" max="100" size="mini" style="margin-top: 20px;" placeholder="补贴红包使用比例(%)"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmPass" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
  </div>
</template>

<script>
import provinces from '@/assets/JSON/provinces.json'
import citys from '@/assets/JSON/cities.json'
import areas from '@/assets/JSON/areas.json'
import VueQr from 'vue-qr'

export default {
  name: 'basetable',
  components: {
    VueQr
  },
  data() {
    return {
      mobilePass:'',
      merchantId:'',
      discountPass:'',
      subsidy_red:30,
      query: {
        pageIndex: 1,
        pageSize: 20
      },
      dialogFormVisible:false,
      state: -1,
      states: -1,
      upload: '',
      editVisible: false,
      tableData: [],
      pageTotal: 0,
      imageUrl: '',
      videoUrl: '',
      type: 0,
      code: -1,
      types: -1,
      navlist: [],
      keyword: '',
      loading: false,
      provincelist: provinces,
      citylist: [],
      arealist: [],
      province: '',
      area: '',
      city: '',
      dialogVisible: false,
      info: {
        user: {},
        name: ''
      },
      list: ["顺丰", '邮政', '中通', '圆通', '申通', '京东', '百世快递', '韵达', '德邦', '天天', '其他'],
      height:0,
      inputShow:false
    };
  },
  created() {
    this.height = window.innerHeight - 230;
    this.getData()
    this.init()
  },
  mounted() {
    // this.getData()
    // this.init()

  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.inputShow = false
    },
    submi() {
      let that = this
      this.$prompt('请输入拒绝原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        that.request('admin/businessList/', 'post', { 'id': that.info.ID, 'code': 1, reason: value }).then(res => {
          if (res.errno == 0) {
            that.$message.success(res.errmsg);
            this.getData()
            this.init()
            this.handleClose()
          } else {
            that.$message.error(res.errmsg)
          }
        })
      }).catch(() => {

      });

    },
    getDataPage() {
      this.query.pageIndex = 1
      this.getData();
    },
    qrtext(info) {
      let urlB='https://www.fubaozx.cn/scan/'

      return `${urlB}?id=${info.ID}`


    },
    confirmPass() {
      if (Number(this.subsidy_red) > 100) {
        this.$message.error('补贴红包使用比例不能超过100%');
        return;
      }
      this.request('admin/businessList/', 'post', { 'id': this.info.ID, three_merchant:this.merchantId,
        three_mobile:this.mobilePass,discount:Number(this.discountPass),subsidy_red:Number(this.subsidy_red),'code': 0 }).then(res => {
          this.$message.success(res.errmsg);
          this.dialogFormVisible = false
          this.dialogVisible = false
          this.getData()
      })
    },
    editDetails() {
      this.inputShow = true
    },
    preserveInput() {
      let data = {
        id: this.info.ID,
        three_merchant: this.info.three_merchant,
        three_mobile: this.info.three_mobile,
        discount: Number(this.info.discount),
        subsidy_red: Number(this.info.subsidy_red)
      }
      this.request('admin/updateBusinessInfo/', 'post', data).then(res => {
        if (res.errno == 0) {
          this.$message.success(res.errmsg);
          this.inputShow = false
        }
      })
    },
    submit(row) {
      if(row.code == 0) {
        this.request('admin/businessList/', 'post', { 'id': this.info.ID,'code': 0 }).then(res => {
          if (res.errno == 0) {
            this.$message.success(res.errmsg);
            this.getData()
            this.init()
            this.handleClose()
          } else {
            this.$message.error(res.errmsg)
          }
        })
      }else{
        this.dialogFormVisible = true
        // this.$prompt('请输入商户ID', '确认通过审核', {
        //   confirmButtonText: '下一步',
        //   cancelButtonText: '取消',
        //   inputPlaceholder: '商户ID'
        // }).then(({ value: merchantId }) => {
        //   return this.$prompt('请输入手机号', '确认通过审核', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     inputPlaceholder: '手机号'
        //   }).then(({ value: mobile }) => {
        //     // 验证输入
        //     if (!merchantId || !mobile) {
        //       this.$message.error('请填写完整信息')
        //       return
        //     }
        //     this.request('admin/businessList/', 'post', { 'id': this.info.ID, three_merchant:merchantId,
        //       three_mobile:mobile,discount:0,'code': 0 }).then(res => {
        //       if (res.errno == 0) {
        //         this.$message.success(res.errmsg);
        //         this.getData()
        //         this.init()
        //         this.handleClose()
        //       } else {
        //         this.$message.error(res.errmsg)
        //       }
        //     })
        //   })
        // }).catch(() => {

        // });
      }

    },
    submits() {
      this.request('admin/businessList/', 'PUT', { 'id': this.info.ID }).then(res => {
        if (res.errno == 0) {
          this.$message.success(res.errmsg);
          this.getData()
          this.init()
          this.handleClose()
        } else {
          this.$message.error(res.errmsg)
        }
      })
    },
    copy(row) {
      // 创建一个input框
      const input = document.createElement('input')
      // 将指定的DOM节点添加到body的末尾
      document.body.appendChild(input)
      // 设置input框的value值为复制的值
      const address = row
      input.setAttribute('value', address)
      // 选取文本域中的内容
      input.select()
      // copy的意思是拷贝当前选中内容到剪贴板
      // document.execCommand（）方法操纵可编辑内容区域的元素
      // 返回值为一个Boolean，如果是 false 则表示操作不被支持或未被启用
      if (document.execCommand('copy')) {
        document.execCommand('copy')
      }
      // 删除这个节点
      document.body.removeChild(input)
      // 弹窗：复制成功
      this.$message.success('复制成功');
      //
    },
    provincechange(e) {
      let code = this.provincelist.filter(item => {
        return item.name == e
      })[0].code
      this.citylist = citys.filter(item => {
        return item.provinceCode == code
      })
      this.arealist = []
      this.city = ''
      this.area = ''
      this.getData()
    },
    citychange(e) {
      let code = this.citylist.filter(item => {
        return item.name == e
      })[0].code
      this.arealist = areas.filter(item => {
        return item.cityCode == code
      })
      this.area = ''
      this.getData()
    },
    init() {
      this.request('admin/addShopClass/', 'get', { page: 1, size: 9999 }).then(res => {
        // console.log(res)
        this.navlist = res.data.data
      })
    },
    //修改size值
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val
      this.getData();
    },
    //获取数据
    getData() {

      this.loading = true
      this.request('admin/businessList/', 'get', {
        keyword: this.keyword,
        page: this.query.pageIndex,
        size: this.query.pageSize,
        shop_class_id: this.state,
        state: this.states,
        code: this.code,
        types: this.types,
        province: this.province,
        area: this.area,
        city: this.city
      }).then(res => {
        this.tableData = res.data.data
        this.pageTotal = res.data.total
        console.log(this.tableData)
      })
      this.loading = false
    },
    // 详情
    handleEdit(e) {
      this.dialogVisible = true
      this.info = e

      if(e.img_info) {
        this.info.license = JSON.parse(e.img_info).license_copy
        this.info.positive = JSON.parse(e.img_info).id_card_copy
        this.info.side = JSON.parse(e.img_info).id_card_national
      }

      //this.$router.push({ path: '/business/businessDetail', query: { data: JSON.stringify(e) } });
    },
    handleData(e) {
      this.$router.push({ path: '/dashboard/business', query: { ID: e.ID } });
    },
    // 交易记录
    handleEdits(e) {
      this.$router.push({ path: '/finance/businesswallet', query: { mobile: e.mobile } });
    },
    cancel() {
      this.getData();
    },
    //排序/推荐
    updateBusiness(row) {
      // console.log(type)
      let data = {
        id: row.ID,
        discount: Number(row.discount),
        sort: Number(row.sort),
        is_excellent: row.is_excellent,
        enterprise: row.enterprise
      }
      // if(type == 3){
      //   data={
      //     id:id,
      //     discount:Number(index)
      //   }
      // }else if(type==0){
      //   data={
      //     id:id,
      //     sort:Number(index)
      //   }
      // }else if(type==1){
      //   data={
      //     id:id,
      //     is_excellent:index
      //   }
      // }else{
      //   data={
      //     id:id,
      //     enterprise:index
      //   }

      // }
      this.request('admin/updateBusiness/', 'POST', data).then(res => {
        if (res.errno == 0) {
          this.$message.success(res.errmsg);
          this.getData()
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.request('admin/order/', 'delete', { ID: row.ID }).then(res => {
            if (res.errno == 0) {
              this.$message.success(res.errmsg);
              this.tableData.splice(index, 1)
              this.getData()
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 添加
    addregion() {
      this.$router.push({ path: '/commodity/addgoods' })
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val);
      this.getData();
    },

    // 图片预览功能
    previewImage(url) {
      // 创建一个临时的img元素用于预览
      const previewImg = document.createElement('img');
      previewImg.src = url;
      previewImg.style.maxWidth = '100%';
      previewImg.style.maxHeight = '100%';

      // 创建遮罩层
      const overlay = document.createElement('div');
      overlay.style.position = 'fixed';
      overlay.style.top = '0';
      overlay.style.left = '0';
      overlay.style.width = '100%';
      overlay.style.height = '100%';
      overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
      overlay.style.display = 'flex';
      overlay.style.justifyContent = 'center';
      overlay.style.alignItems = 'center';
      overlay.style.zIndex = '9999';
      overlay.style.cursor = 'pointer';

      // 点击遮罩层关闭预览
      overlay.addEventListener('click', () => {
        document.body.removeChild(overlay);
      });

      // 将图片添加到遮罩层
      overlay.appendChild(previewImg);

      // 将遮罩层添加到页面
      document.body.appendChild(overlay);
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.containerbox {
  padding: 20px;
}

.goodslist {
  height: 200px;
  /* background-color: snow; */
  display: flex;
  justify-content: flex-start;
  /* align-items: center; */
  width: 100%;

}

.goodslist img {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.goodsdetail div {
  margin: 10px 0;
}

.submt {

  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.el-upload--text {
  width: 200px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;

  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  /* width: 100px; */
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 178px;
  display: block;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 200px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 60px;
  height: 60px;

  .el-image img {
    object-fit: cover;
  }
}

/* 设置分页按钮样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.margin-bottom {
  margin-bottom: 20px;
}
/* 使用 /deep/ 或 >>> 来穿透 scoped 样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
  /* 设置表头颜色 */
  color: #333;
  /* 设置表头文字颜色 */
}
::v-deep .el-dialog__body{
  padding-top: 0;
}
</style>
